.live-container {
	height: 100vh;
	background-color: #f5f7fa;

	.main-content {
		padding: 20px;
		height: 100%;

		.content-wrapper {
			display: flex;
			gap: 20px;
			height: 100%;
			max-width: 1800px;
			margin: 0 auto;

			@media (max-width: 1200px) {
				flex-direction: column;
			}

			.stream-section {
				flex: 1;
				display: flex;
				flex-direction: column;
				gap: 20px;

				.video-container {
					position: relative;
					background: #000;
					border-radius: 12px;
					overflow: hidden;
					aspect-ratio: 16/9;
					flex: 1;

					.video-player {
						width: 100%;
						height: 100%;

						.video-placeholder {
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							text-align: center;
							color: #666;

							p {
								margin-top: 10px;
								font-size: 18px;
							}
						}
					}

					.stream-info {
						position: absolute;
						top: 20px;
						left: 20px;
						display: flex;
						gap: 20px;
						color: #fff;
						text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);

						.viewer-count,
						.stream-duration {
							display: flex;
							align-items: center;
							gap: 5px;
							background: rgba(0, 0, 0, 0.5);
							padding: 5px 10px;
							border-radius: 20px;
							font-size: 14px;
						}
					}

					#videoContainer {
						width: 100%;
						height: 100%;

						:deep(video) {
							width: 100%;
							height: 100%;

							&::-webkit-media-controls {
								display: none;
							}
						}
					}
				}

				.control-panel {
					background: #fff;
					border-radius: 12px;
					padding: 20px;
					box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

					.stream-settings {
						// margin-bottom: 20px;
					}

					.media-controls {
						display: flex;
						gap: 12px;
						align-items: center;
						flex-wrap: wrap;
						padding: 10px 0;

						.btn-wrap{
							display: flex;
							align-items: center;
						}

						.control-btn {
							display: flex;
							gap: 4px;
							padding: 8px 16px;
							height: auto;
							min-width: 80px;
							transition: all 0.3s ease;

							.el-icon {
								font-size: 20px;
							}

							.btn-text {
								font-size: 12px;
								margin-top: 2px;
							}

							&:hover {
								transform: translateY(-2px);
							}

							&.is-disabled {
								transform: none;
							}
						}

						.stream-button {
							margin-left: auto;
							min-width: 120px;
							height: 40px;
							display: flex;
							align-items: center;
							justify-content: center;

							.button-icon {
								font-size: 16px;
								margin-right: 6px;
							}

							&:hover {
								transform: translateY(-2px);
							}

							&.is-disabled {
								transform: none;
							}
						}
					}
				}
			}

			.chat-section {
				width: 420px;
				background: #fff;
				border-radius: 12px;
				display: flex;
				flex-direction: column;
				box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
				height: calc(100vh - 40px); // 设置固定高度确保出现滚动条

				@media (max-width: 1200px) {
					width: 100%;
					height: 400px;
				}

				.chat-header {
					padding: 15px 20px;
					border-bottom: 1px solid #eee;
					background: #f8f9fa;
					border-radius: 12px 12px 0 0;

					.header-title {
						display: flex;
						align-items: center;
						gap: 8px;
						font-size: 16px;
						font-weight: 500;
						color: #333;

						.el-icon {
							font-size: 18px;
							color: #409eff;
						}

						.message-count {
							margin-left: 8px;

							:deep(.el-tag__content) {
								display: flex;
								align-items: center;
								gap: 4px;
							}
						}
					}
				}

				.chat-messages {
					flex: 1;
					position: relative;
					overflow: hidden;
					background: linear-gradient(to bottom, #f8f9fa, #fff);

					.messages-wrapper {
						height: 100%;
						position: relative;
						overflow-y: auto;
						padding: 6px 4px;

						:deep(.message-item) {
							// &.self{
							// 	flex-direction: row-reverse;

							// 	.message-info{
							// 		flex-direction: row-reverse;
							// 		justify-content: flex-start !important;
							// 	}
							// }
							&:not(.system) {
								display: flex;
								gap: 4px;
								margin-bottom: 2px;
								padding: 1px 2px;
								align-items: flex-start;

								img.avatar {
									width: 20px;
									height: 20px;
									border-radius: 50%;
									flex-shrink: 0;
									object-fit: cover;
									border: 1px solid rgba(0, 0, 0, 0.05);
									background-color: #fff;
									transition: all 0.2s ease;
									box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

									&.hide{
										display: none;
									}

									&:hover {
										transform: scale(1.1);
										border-color: #409eff;
										box-shadow: 0 2px 4px rgba(64, 158, 255, 0.15);
									}
								}

								.message-content {
									flex: 1;
									min-width: 0;
									margin-bottom: 10px;

									// &.self{
									// 	text-align: right;

									// 	.message-info{
									// 		justify-content: flex-end;
									// 	}

									// 	.message-text{
									// 		background: rgba(64, 158, 255, 0.05);
									// 		border-radius: 8px 2px 8px 8px;
									// 		color: #333;
									// 	}

									// }

									.message-info {
										display: flex;
										align-items: center;
										gap: 4px;
										margin-bottom: 1px;

										.tag{
											display: none;
											padding: 1px 4px;
											font-size: 10px;
											border-radius: 3px;
											margin-left: 6px;
											color: #fff;
											background-color: #909399;
											line-height: 1.2;
											font-weight: normal;
											vertical-align: middle;
											transform: translateY(-1px);
											
											&.self {
												display: inline-block;
												background-color: var(--el-color-success-light-3);
												border: 1px solid var(--el-color-success-light-5);
											}
										}

										.username {
											font-size: 12px;
											color: #666;
											font-weight: 500;
										}

										.time {
											font-size: 12px;
											color: #999;
										}
									}

									.message-text {
										display: inline-block;
										padding: 6px 10px;
										font-size: 14px;
										line-height: 1.3;
										color: #333;
										background: #f0f2f5;
										border-radius: 2px 8px 8px 8px;
										max-width: 85%;
										word-break: break-word;
										box-shadow: 0 1px 1px rgba(0, 0, 0, 0.02);

										&:hover {
											background: #ebedf0;
										}
									}
								}
							}

							&.system {
								padding: 1px 0;
								margin: 2px 0;

								.system-message {
									padding: 2px 8px;
									background: rgba(64, 158, 255, 0.05);
									border-radius: 8px;
									width: fit-content;
									margin: 0 auto;
									display: flex;
									align-items: center;
									gap: 4px;

									.el-icon {
										font-size: 12px;
										color: #409eff;
									}

									span {
										font-size: 12px;
										color: #409eff;
									}
								}
							}
						}
					}
				}

			}
		}
	}
}

// 添加消息出现动画
@keyframes messageIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.message-item {

	&:not(.system) {
		display: flex;
		gap: 4px;
		margin-bottom: 2px;
		padding: 1px 2px;
		align-items: flex-start;

		.avatar {
			width: 18px;
			height: 18px;
			border-radius: 50%;
			flex-shrink: 0;
			object-fit: cover;
			border: 1px solid rgba(0, 0, 0, 0.05);
			background-color: #fff;
			transition: all 0.2s ease;
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

			&.hide{
				display: none;
			}

			&:hover {
				transform: scale(1.1);
				border-color: #409eff;
				box-shadow: 0 2px 4px rgba(64, 158, 255, 0.15);
			}
		}

		.message-content {
			flex: 1;
			min-width: 0;
			margin-bottom: 10px;

			.message-info {
				display: flex;
				align-items: center;
				gap: 4px;
				margin-bottom: 1px;

				.username {
					font-size: 9px;
					color: #666;
					font-weight: 500;
				}

				.time {
					font-size: 8px;
					color: #999;
				}
			}

			.message-text {
				display: inline-block;
				padding: 4px 8px;
				font-size: 11px;
				line-height: 1.3;
				color: #333;
				background: #f0f2f5;
				border-radius: 2px 8px 8px 8px;
				max-width: 85%;
				word-break: break-word;
				box-shadow: 0 1px 1px rgba(0, 0, 0, 0.02);

				&:hover {
					background: #ebedf0;
				}
			}
		}
	}

	&.system {
		padding: 1px 0;
		margin: 2px 0;

		.system-message {
			padding: 2px 8px;
			background: rgba(64, 158, 255, 0.05);
			border-radius: 8px;
			width: fit-content;
			margin: 0 auto;
			display: flex;
			align-items: center;
			gap: 4px;

			.el-icon {
				font-size: 12px;
				color: #409eff;
			}

			span {
				font-size: 12px;
				color: #409eff;
			}
		}
	}
}

// 优化滚动容器样式
.messages-wrapper {
	padding: 6px 4px;
}

:deep(.list-virtual) {
	padding: 4px !important;
}

